<template>
  <el-select collapse-tags-tooltip v-model="value" ref="select">
    <el-option
      v-for="item in options"
      :key="item[mergedFieldsConfig.value]"
      :label="item[mergedFieldsConfig.label]"
      :value="item[mergedFieldsConfig.value]"
      :disabled="item[mergedFieldsConfig.disabled]"
      :class="{ forbidden: item.forbidden }"
    />
  </el-select>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { formComponentsProps, formComponentsEmits } from './components'

defineOptions({
  name: 'MSelect'
})

const DEFAULT_FIELDS = {
  value: 'value',
  label: 'label',
  disabled: 'disabled'
}

const props = defineProps(formComponentsProps)
const emit = defineEmits(formComponentsEmits)

const value = computed({
  get: () => {
    return props.modelValue
  },
  set: (val) => {
    emit('update:modelValue', val)
  }
})

const mergedFieldsConfig = computed(() => {
  return {
    ...DEFAULT_FIELDS,
    ...props.fields
  }
})
const select = ref()
defineExpose({
  select
})
</script>

<style lang="scss" scoped>
.forbidden {
  cursor: not-allowed !important;
  color: #c0c4cc !important;
  pointer-events: none;
  .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hove {
    background: #fff !important;
  }
}
</style>
